<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>试验性功能</title>
	<style>
		.container {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			grid-template-rows: masonry;
			grid-gap: 10px;
		}

		img {
			width: 100%;
		}
	</style>
</head>

<body>
	<!-- chrome 我没有实验成功 -->
	<!-- firefox 开启masonry功能 -->
	<!-- 地址栏输入about:config 搜索masonry 设置为 true 即可 -->
	<div class="container">
		<img src="./assets/0001.jpg" alt="">
		<img src="./assets/0002.jpg" alt="">
		<img src="./assets/0003.jpg" alt="">
		<img src="./assets/0004.jpg" alt="">
		<img src="./assets/0005.jpg" alt="">
		<img src="./assets/0006.jpg" alt="">
		<img src="./assets/0007.jpg" alt="">
		<img src="./assets/0008.jpg" alt="">
		<img src="./assets/0009.jpg" alt="">
		<img src="./assets/0010.jpg" alt="">
		<img src="./assets/0011.jpg" alt="">
		<img src="./assets/0012.jpg" alt="">
		<img src="./assets/0013.jpg" alt="">
		<img src="./assets/0014.jpg" alt="">
		<img src="./assets/0015.jpg" alt="">
		<img src="./assets/0016.jpg" alt="">
		<img src="./assets/0017.jpg" alt="">
		<img src="./assets/0018.jpg" alt="">
		<img src="./assets/0019.jpg" alt="">
		<img src="./assets/0020.jpg" alt="">
		<img src="./assets/0021.jpg" alt="">
		<img src="./assets/0022.jpg" alt="">
	</div>
</body>

</html>